<template>
  <div class="mainContent" :class="$store.state.isCollapse?'position-collapse-left':'position-left'" :style="isMobileFlag ? 'padding: 0;height: calc(100% - 100px);' : ''">
    <keep-alive :include="cacheTab">
      <router-view v-if="isRouterAliveFlag"></router-view>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    name: "mainContent",
    components: {},
    data() {
      return {
        isMobileFlag: this.$utils.isMobile(), // 判断是否手机
        isRouterAliveFlag: true
      };
    },
    computed: {
      cacheTab() {
        return this.$store.state.cacheTab;
      },
      isRouterAlive() {
        return this.$store.state.isRouterAlive; // 强制刷新页面
      },
    },
    watch: {
      isRouterAlive(val) {
        this.isRouterAliveFlag = val;
      },
    },
    conputed: {},
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .mainContent {
    position: absolute;
    // top: 90px;
    top: 95px;
    right: 0;
    z-index: 1020;
    transition: 0.5s;
    padding: 20px 10px 0;
    height: calc(100% - 115px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .position-left {
    left: 201px;
  }

  .position-collapse-left {
    left: 65px;
  }
</style>
